<template>
    <div class="slider-container">
        <div class="slider">
            <div class="slide banner1">
                <div class="date">{{ peakTime.peakDay }} {{ peakTime.peakPeriod }}</div>
                <div class="week">{{ peakTime.weekday }}-{{ peakTime.maxCount }}人</div>
                <div class="line"></div>
                <div class="title">时段高峰统计</div>
                <div class="peak">
                    <div class="item nine">
                        <div>
                            <img src="../../../assets/clock9.png" alt="">
                            <div class="time">9：00-11：00</div>
                            <div><span>高峰天数</span><span class="day">{{ periodTime['9-11'] }}</span><span>天</span></div>
                        </div>

                    </div>
                    <div class="item eleven">
                        <div>
                            <img src="../../../assets/clock11.png" alt="">
                            <div class="time">11：00-13：00</div>
                            <div><span>高峰天数</span><span class="day">{{ periodTime['11-13'] }}</span><span>天</span></div>
                        </div>

                    </div>
                    <div class="item thirteen">
                        <div>
                            <img src="../../../assets/clock13.png" alt="">
                            <div class="time">13：00-15：00</div>
                            <div><span>高峰天数</span><span class="day">{{ periodTime['13-15'] }}</span><span>天</span></div>
                        </div>

                    </div>
                    <div class="item fifth">
                        <div>
                            <img src="../../../assets/clock15.png" alt="">
                            <div class="time">15：00-17：00</div>
                            <div><span>高峰天数</span><span class="day">{{ periodTime['15-17'] }}</span><span>天</span></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { flowPeak, timePeak } from '@/api/statistics';


export default {
    name: "peakTimeStatistics",  //时段高峰统计
    components: {
    },
    props: {
        month: {
            type: String,
            // required: true,
        }
    },
    data() {
        return {
            peakTime: {
                peakDay: '',
                peakPeriod: '',
                maxCount: '',
                weekday: ''
            },
            periodTime: {
                "9-11": 0,
                "11-13": 0,
                "13-15": 0,
                "15-17": 0

            }
        };
    },
    created() {
        // this.getPeakTime();
        // this.getTimePeak();

    },
    watch: {
        month(val) {
            // console.log('month', val);
            this.nowMonth = val;
            this.getPeakTime()
            this.getTimePeak();
        }
    },
    mounted() {

    },
    methods: {
        getPeakTime() {
            let query = {
                month: this.nowMonth
            }
            flowPeak(query).then(res => {
                if (res.code === 200) {
                    const dateNumber = res.data.peakDay;
                    const dateStr = dateNumber.toString();
                    const year = dateStr.substring(0, 4);
                    const month = (parseInt(dateStr.substring(4, 6), 10)).toString() // 月份加1
                    const day = parseInt(dateStr.substring(6, 8)).toString()
                    console.log(year, month, day, '年月日');
                    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                    const dayOfWeek = weekDays[new Date(year, month - 1, day).getDay()];
                    this.peakTime.weekday = dayOfWeek;
                    // 拼接成YYYY-MM-DD格式的字符串
                    this.peakTime.peakDay = `${year}-${month}-${day}`
                    this.peakTime.maxCount = res.data.maxCount;
                    this.peakTime.peakPeriod = res.data.peakPeriod.split('-')[0] + '：00-' + res.data.peakPeriod.split('-')[1] + '：00';
                }

            })
        },
        getTimePeak() {
            let query = {
                month: this.nowMonth
            }
            timePeak(query).then(res => {
                if (res.code === 200) {
                    this.periodTime = res.data;
                }
            })
        }
    }
};
</script>


<style lang="scss" scoped>
.slider-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner1 {
    background-image: url(../../../assets/banner5.png);
    padding: 240px 68px 0px 68px;
    color: white;
}

.date {
    font-size: 32px;
    letter-spacing: 10px;
    margin-bottom: 30px;
    font-weight: 700;
    font-family: "微软雅黑";

}

.week {
    font-size: 32px;
    letter-spacing: 50px;
    margin-bottom: 60px;
    font-family: "微软雅黑";

}

.line {
    height: 1px;
    width: 100%;
    margin-bottom: 46px;
    background-color: white;
}

.title {
    font-size: 40px;
    letter-spacing: 28px;
    font-weight: 700;
    margin-bottom: 66px;
}

.peak {
    display: flex;
    justify-content: center;



    .item {
        width: 374px;
        height: 414px;
        border-radius: 12px;
        margin: 0 30px;
        position: relative;
        z-index: 0;

        >div {
            /* 确保内容堆叠在伪元素之上 */
            z-index: 2;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            position: relative;
        }

        .day {
            font-size: 34px;
            font-weight: 500;
            font-family: "微软雅黑";

        }

        .time {
            margin-top: 44px;
            margin-bottom: 24px;
            font-size: 20px;
            font-family: "微软雅黑";
            font-weight: 600;
        }

    }

    .nine {
        background: fixed url(../../../assets/9-00.png) no-repeat 0 0/cover;
    }

    .eleven {
        background: fixed url(../../../assets/11-00.png) no-repeat 0 0/cover;
    }

    .thirteen {
        background: fixed url(../../../assets/13-00.png) no-repeat 0 0/cover;
    }

    .fifth {
        background: fixed url(../../../assets/15-00.png) no-repeat 0 0/cover;
    }

    .item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        /* 确保伪元素在内容之下 */
        // filter: blur(50px);
        backdrop-filter: blur(5px);
        border-radius: 12px;

        /* 模糊伪元素 */

    }
}
</style>